<script setup lang="ts">
  import { getSchemeDetail } from '@/api/scheme'
  import { useRoute } from 'vue-router'
  import { onMounted, reactive, ref } from 'vue'
  import { NEllipsis, NInput, NIcon } from 'naive-ui'
  import BackNav from '@/components/common/BackNav/index.vue'
  import SvgIcon from '@/components/SvgIcon/index.vue'
  import CategoryTable from './CategoryTable.vue'
  import { SearchOutlined, ArrowRightOutlined, ArrowDropDownOutlined } from '@vicons/material'
  const route = useRoute()
  const id = route.params.id as string | number
  const selectCategory = ref<string | number>('')
  const schemeDetail = reactive({
    name: '',
    createTime: '',
    description: '',
    knowledgeName: '',
    llmName: '',
    url: '',
  })
  const getDetail = async () => {
    const res = await getSchemeDetail({ id })
    const { name, createTime, description, knowledgeName, llmName, url } = res
    schemeDetail.name = name
    schemeDetail.createTime = createTime
    schemeDetail.description = description
    schemeDetail.knowledgeName = knowledgeName ?? '--'
    schemeDetail.llmName = llmName ?? '--'
    schemeDetail.url = url
    if (res.schemeCategoryList.length > 0) {
      selectCategory.value = res.schemeCategoryList[0].id
    }
    treeData.value[0].children = res.schemeCategoryList.map(
      (item: { categoryName: any; id: any }) => ({
        label: item.categoryName,
        key: item.id,
      })
    )
  }

  const categoryName = ref('')
  const treeData = ref<
    {
      label: string
      key: string
      expand: boolean
      children: {
        label: string
        key: string
      }[]
    }[]
  >([
    {
      label: '全部',
      key: 'all',
      expand: true,
      children: [],
    },
  ])

  const handleSelectCategory = (key: string | number) => {
    selectCategory.value = key
  }

  onMounted(async () => {
    await getDetail()
  })
</script>

<template>
  <div class="h-full flex flex-col py-5 gap-4">
    <BackNav :title="schemeDetail.name" back-path="/create/libraryScheme" />
    <div class="h-[calc(100%-82px)]">
      <div class="h-full bg-white rounded p-5 flex flex-col">
        <!-- 基础信息 -->
        <div class="h-[122px] bg-[#F2F6FA] rounded-lg flex p-5 pingfang gap-8 mb-5">
          <div class="h-full flex items-center justify-center w-[72px]">
            <SvgIcon class="text-[48px]" name="library" />
          </div>
          <div class="flex-1">
            <div class="text-[20px] leading-7 h-7 font-bold">{{ schemeDetail.name }}</div>
            <div class="flex items-center gap-10 h-[22px] leading-[22px] my-[6px]">
              <div class="flex items-center">
                <span class="text-[#4A5055]">创建时间：</span>
                <span>{{ schemeDetail.createTime }}</span>
              </div>
              <div class="flex items-center">
                <span class="text-[#4A5055]">知识库：</span>
                <span>{{ schemeDetail.knowledgeName }}</span>
              </div>
              <div class="flex items-center">
                <span class="text-[#4A5055]">大模型：</span>
                <span>{{ schemeDetail.llmName }}</span>
              </div>
            </div>
            <div class="flex items-center h-[22px] leading-[22px]">
              <div class="text-[#4A5055]">方案描述：</div>
              <div class="max-w-[720px]">
                <n-ellipsis>{{ schemeDetail.description }}</n-ellipsis>
              </div>
            </div>
          </div>
        </div>
        <!-- 方案内容 -->
        <div class="h-[calc(100%-146px)] flex gap-9 mt-6">
          <div class="w-[240px] h-full flex flex-col gap-6">
            <div class="h-8 leading-8 flex items-center">
              <n-input v-model:value="categoryName" placeholder="请输入类别名称" size="small">
                <template #suffix>
                  <n-icon>
                    <SearchOutlined />
                  </n-icon>
                </template>
              </n-input>
            </div>
            <div class="flex-1">
              <!-- <n-tree :data="treeData" default-expand-all  /> -->
              <div v-for="item in treeData" :key="item.key">
                <div
                  class="leading-9 h-9 flex items-center cursor-pointer"
                  @click="item.expand = !item.expand"
                >
                  <n-icon class="text-[16px] text-[#4A5055]">
                    <ArrowRightOutlined v-if="!item.expand" />
                    <ArrowDropDownOutlined v-else />
                  </n-icon>
                  <div class="text-[14px] leading-9 ml-2">{{ item.label }}</div>
                </div>
                <div v-if="item.expand">
                  <div
                    v-for="child in item.children"
                    :key="child.key"
                    v-show="child.label.indexOf(categoryName) !== -1"
                    class="text-[14px] rounded h-9 leading-9 ml-2 cursor-pointer pl-6 font-medium hover:bg-[#0B5CFF05] hover:text-[#0B5CFF]"
                    :class="{ 'bg-[#0B5CFF05] text-[#0B5CFF]': selectCategory === child.key }"
                    @click="handleSelectCategory(child.key)"
                  >
                    {{ child.label }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <CategoryTable :categoryType="selectCategory" />
        </div>
      </div>
    </div>
  </div>
</template>
